<template>
	<view class="container">
		<!-- 选项卡 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @tap="switchTab(0)">基本素材</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @tap="switchTab(1)">控制素材</view>
		</view>

		<!-- 基本素材 -->
		<view v-show="activeTab === 0" class="content">
			<view class="form-item">
				<text class="label">图片</text>
				<view class="upload-area grid">
					<view v-for="(img, idx) in basic.images" :key="idx" class="upload-box">
						<image :src="img" class="thumb" />
						<view class="delete-btn" @tap="removeBasicImage(idx)">
							<text>×</text>
						</view>
					</view>
					<view class="upload-box placeholder" @tap="chooseBasicImages">
						<text>+</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">描述</text>
				<input v-model="basic.desc" class="input" placeholder="请输入描述" />
			</view>

			<view class="form-item tags">
				<text class="label">标签</text>
				<view class="tag-list">
					<view class="tag" v-for="(tag, i) in basic.tags" :key="i">
						<text>{{ tag }}</text>
						<text class="del" @tap="removeTag(0, i)">×</text>
					</view>
					<view class="add-tag">
						<input v-model="basic.newTag" class="tag-input" placeholder="添加标签" />
						<button class="btn" @tap="addTag(0)">添加</button>
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="upload-btn full" @tap="submitBasic">
					<text>点击上传</text>
				</view>
			</view>
		</view>

		<!-- 控制素材 -->
		<view v-show="activeTab === 1" class="content">
			<view class="form-item">
				<text class="label">原图</text>
				<view class="upload-box" @tap="chooseControlImage">
					<image v-if="control.image" :src="control.image" class="thumb" />
					<view v-else class="placeholder"><text>+</text></view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">结果图</text>
				<view class="upload-area grid">
					<view v-for="(img, idx) in control.extraImages" :key="idx" class="upload-box">
						<image :src="img" class="thumb" />
						<view class="delete-btn" @tap="removeExtraImage(idx)">
							<text>×</text>
						</view>
					</view>
					<view class="upload-box placeholder" @tap="chooseExtraImages">
						<text>+</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">描述</text>
				<input v-model="control.desc" class="input" placeholder="请输入描述" />
			</view>

			<view class="form-item tags">
				<text class="label">标签</text>
				<view class="tag-list">
					<view class="tag" v-for="(tag, i) in control.tags" :key="i">
						<text>{{ tag }}</text>
						<text class="del" @tap="removeTag(1, i)">×</text>
					</view>
					<view class="add-tag">
						<input v-model="control.newTag" class="tag-input" placeholder="添加标签" />
						<button class="btn" @tap="addTag(1)">添加</button>
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="upload-btn full" @tap="submitControl">
					<text>点击上传</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/Channel.js'
	import commonMixin from '@/mixins/qiLiuyun.js';
	import request from '../../api/index.js'
	import suffixAddress from '../../api/suffixAddress.js'

	export default {
		mixins: [commonMixin],
		data() {
			return {
				activeTab: 1,
				basic: {
					images: [],
					desc: '',
					tags: [],
					newTag: ''
				},
				control: {
					image: '',
					extraImages: [],
					desc: '',
					tags: ['切割', '心形'],
					newTag: ''
				},
				qiniuyunImage: []
			};
		},
		methods: {
			switchTab(i) {
				this.activeTab = i;
			},
			chooseBasicImages() {
				uni.chooseImage({
					count: 9,
					success: res => this.basic.images.push(...res.tempFilePaths)
				});
			},
			removeBasicImage(idx) {
				this.basic.images.splice(idx, 1);
			},
			chooseControlImage() {
				uni.chooseImage({
					count: 1,
					success: res => this.control.image = res.tempFilePaths[0]
				});
			},
			chooseExtraImages() {
				uni.chooseImage({
					count: 9,
					success: res => this.control.extraImages.push(...res.tempFilePaths)
				});
			},
			removeExtraImage(idx) {
				this.control.extraImages.splice(idx, 1);
			},
			async submitBasic() {
				if (this.basic.images.length === 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'error',
						duration: 1000
					});
					return;
				}
				if (this.basic.tags.length === 0) {
					uni.showToast({
						title: '请输入标签',
						icon: 'error',
						duration: 1000
					});
					return;
				}

				uni.showLoading({
					title: '上传中',
					mask: true
				});

				this.qiniuyunImage = [];
				for (const filePath of this.basic.images) {
					let key = await this.Tokenqiniu(filePath, 'ai-train-lora');
					this.qiniuyunImage.push(key);
				}

				let obj = {
					data: {
						imageKey: this.qiniuyunImage,
						textContent: this.basic.desc,
						tagList: this.basic.tags
					},
					url: api.ctrl + '/lora-materials',
					method: "POST",
				};

				let res = await request(obj);
				uni.hideLoading();
				uni.showToast({
					title: '上传成功',
					icon: 'success',
					duration: 1000
				});

				this.basic = {
					images: [],
					desc: '',
					tags: [],
					newTag: ''
				};
				this.qiniuyunImage = [];
			},
			async submitControl() {
				if (this.control.extraImages.length === 0) {
					uni.showToast({
						title: '请上传结果图',
						icon: 'error',
						duration: 1000
					});
					return;
				}
				if (this.control.tags.length === 0) {
					uni.showToast({
						title: '请输入标签',
						icon: 'error',
						duration: 1000
					});
					return;
				}
				if (this.control.image === '') {
					uni.showToast({
						title: '请上传原图',
						icon: 'error',
						duration: 1000
					});
					return;
				}

				uni.showLoading({
					title: '上传中',
					mask: true
				});

				let controlImageKey = await this.Tokenqiniu(this.control.image, 'ai-train-controlNet-source');
				let targetImageKeys = [];
				for (const img of this.control.extraImages) {
					const key = await this.Tokenqiniu(img, 'ai-train-controlNet-target');
					targetImageKeys.push(key);
				}


				for (const el of targetImageKeys) {
				    let obj = {
				        data: {
				            sourceImageKey: controlImageKey,
				            targetImageKey: el,
				            textContent: this.control.desc,
				            tagList: this.control.tags
				        },
				        url: api.ctrl + '/control-net-materials',
				        method: "POST",
				    };
				
				    let res = await request(obj);
				    // 你可以根据需要处理 res
				}



				uni.hideLoading();
				uni.showToast({
					title: '上传成功',
					icon: 'success',
					duration: 1000
				});

				this.control = {
					image: '',
					extraImages: [],
					desc: '',
					tags: ['切割', '心形'],
					newTag: ''
				};
			},
			addTag(tab) {
				const obj = tab === 0 ? this.basic : this.control;
				const t = obj.newTag.trim();
				if (t) {
					obj.tags.push(t);
					obj.newTag = '';
				}
			},
			removeTag(tab, idx) {
				const obj = tab === 0 ? this.basic : this.control;
				obj.tags.splice(idx, 1);
			}
		}
	};
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.tabs {
		flex-direction: row;
		display: flex;
		border-bottom: 2rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #666;
	}

	.tab-item.active {
		color: #007AFF;
		border-bottom: 4rpx solid #007AFF;
	}

	.content {
		margin-top: 20rpx;
	}

	.form-item {
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
		display: flex;
	}

	.label {
		width: 120rpx;
		font-size: 30rpx;
		color: #333;
		margin-top: 10rpx;
	}

	.upload-area.grid {
		display: grid;
		grid-template-columns: repeat(3, 200rpx);
		grid-gap: 10rpx;
		margin-left: 20rpx;
	}

	.upload-box {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #ccc;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		position: relative;
	}

	.delete-btn {
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		width: 30rpx;
		height: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 15rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.delete-btn text {
		color: #fff;
		font-size: 24rpx;
	}

	.upload-btn.full {
		width: 70%;
		margin: 0 auto;
		padding: 15rpx 0;
		background-color: #007AFF;
		border-radius: 8rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.upload-btn.full text {
		color: #fff;
		font-size: 28rpx;
	}

	.placeholder text {
		font-size: 50rpx;
		color: #ccc;
	}

	.thumb {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.input {
		flex: 1;
		height: 60rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		font-size: 28rpx;
	}

	.tags {
		flex-direction: column;
		align-items: flex-start;
	}

	.tag-list {
		flex-wrap: wrap;
		display: flex;
		margin-left: 20rpx;
	}

	.tag {
		background-color: #f2f2f2;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		margin: 5rpx;
		flex-direction: row;
		align-items: center;
		display: flex;
	}

	.del {
		margin-left: 10rpx;
		color: #ff4444;
		font-size: 30rpx;
	}

	.add-tag {
		flex-direction: row;
		align-items: center;
		display: flex;
		margin: 5rpx;
		margin-left: 20rpx;
	}

	.tag-input {
		flex: 1;
		height: 60rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		font-size: 28rpx;
	}

	.btn {
		margin-left: 10rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 5rpx;
	}
</style>